var dizhi = 'http://192.168.5.120:8089';
// 搜索

$('input').keyup(function (event) {
    console.log(this.value);
    $('#xiangguan').css('display', 'block')
    if (this.value && event.which !== 13) {
        $('#xiangguan').empty()
        $('#resou').css('display', 'none')
        $('#lishisousuo').css('display', 'none')
        $.ajax({
            url: dizhi + '/search/suggest',
            data: {
                keywords: this.value
            },
            success: res => {
                console.log(res);
                $.each(res.result, (index, item) => {
                    $.each(item, (index1, item1) => {
                        if (!item1.name) {
                            return
                        }
                        $('#xiangguan').append(`<p>${item1.name}</p>`)
                    })
                })
            }
        })
    }
    else if (!this.value) {
        $('#resou').css('display', 'flex')
        $('#lishisousuo').css('display', 'block')
        $('#xiangguan').css('display', 'none')
    }
    // 回车
    if (event.which === 13) {
        $('#xiangguan').empty()
        var shuruzhi = this.value
        var a = localStorage.getItem('lishisousuo')
        console.log(a);
        // 搜索结果
        $.ajax({
            url: dizhi + '/search/suggest',
            data: {
                keywords: this.value
            },
            success: res => {
                console.log(res);
                $.each(res.result.songs, (index, item) => {
                    console.log(22);
                    if (!res.result.songs.length) {
                        $('#xiangguan').append(`<p>没有结果</p>`)
                        return
                    }
                    else {
                        var geshouming = ''
                        $.each(item.artists, function (index1, item1) {
                            geshouming += item1.name + '/'
                        })
                        $('#xiangguan').append(`<a href = './gequxiangqing.html?id=${item.id}' > <div class="zuixinyinyueBox">
                            <div class="zuixinyinyueBox_left">
                                <div class="geming">${item.name}</div>
                                <div class="geshouming-zhuanjiming danhangshenglue">
                                    <div class="gequzhiling"><img src="./" alt=""></div>${geshouming}-${item.album.name}
                                </div>
                            </div>
                            <div class="zuixinyinyueBox_rigth"></div>
                        </div></a>`)
                    }
                })
            }
        })
        // 添加历史记录
        if (a) {
            var lishival = JSON.parse(a)
            lishival.push(this.value)
            localStorage.setItem('lishisousuo', JSON.stringify(lishival))
        }
        else {
            localStorage.setItem('lishisousuo', `[${this.value}]`)
        }
        var changdu = JSON.parse(localStorage.getItem('lishisousuo')).length - 1
        $('#lishisousuo').prepend(`
            <div class="lishisousuoBox">
            <div class="lishisousuoBox_left">时钟</div>
            <div class="lishisousuoBox_right">
                <div>${JSON.parse(localStorage.getItem('lishisousuo'))[changdu]}</div>
                <div class="shanchujilu" id="${changdu}">x</div>
            </div>
        </div>
            `)

    }
    // 删除记录
    $('.shanchujilu').click(function () {
        $(this).parents('.lishisousuoBox').remove()
        var newls = JSON.parse(localStorage.getItem('lishisousuo'))
        newls.splice($(this).attr('id'), 1);
        localStorage.setItem('lishisousuo', JSON.stringify(newls))
    })
})



// 渲染历史搜索

$.each(JSON.parse(localStorage.getItem('lishisousuo')), (index, item) => {
    $('#lishisousuo').prepend(`
        <div class="lishisousuoBox">
        <div class="lishisousuoBox_left">时钟</div>
        <div class="lishisousuoBox_right">
            <div>${JSON.parse(localStorage.getItem('lishisousuo'))[index]}</div>
            <div class="shanchujilu" id="${index}">x</div>
        </div>
    </div>
        `)
})
// 删除记录
$('.shanchujilu').click(function () {
    $(this).parents('.lishisousuoBox').remove()
    var newls = JSON.parse(localStorage.getItem('lishisousuo'))
    newls.splice($(this).attr('id'), 1);
    localStorage.setItem('lishisousuo', JSON.stringify(newls))
})

// 渲染热搜

// $.ajax({
//     url: dizhi + '/search/hot/detail',
//     success: res => {
//         console.log(res);
//         $.each(res.data, (index, item) => {

//             $('#resou').append(`<div class="resouBox">
//             ${item.searchWord}
//         </div>`)
//         })
//     }
// })


